<template>
  <div id="echartFour">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {

  data () {
    return {

    };
  },

  mounted () {
    this.initChart()
  },

  methods: {
    initChart () {
      this.echart = echarts.init(document.getElementById('echartFour'))
      let option = {
        tooltip: {
          trigger: 'item',
          //formatter: '{a}{d}'
        },
        legend: {
          right: '5%',
          right: 'right'
        },
        series: [
          {
            name: '专家年龄分布',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              position:'outside',
              margin:22,
              formatter: '{b}: {d}%'
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: '0~29岁' },
              { value: 735, name: '30~39岁' },
              { value: 1048, name: '40~49岁' },
              { value: 735, name: '50~59岁' },
              { value: 1048, name: '60~69岁' },
              { value: 735, name: '70岁以上' },
            ]
          }
        ]
      }
      this.echart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>
#echartFour {
  width: 560px;
  height: 260px;
}
</style>